<script setup lang="ts">
import { Model } from "survey-core";
import { json } from "../../data/full_survey_json.js";


function sendSyncRequest(url, jsonData) {
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();

  // 初始化一个GET请求，设置为同步
  xhr.open('POST', url, false);

  // 设置请求头，指明发送的是JSON格式的数据
  xhr.setRequestHeader('Content-Type', 'application/json');

  // 设置一个函数来处理响应数据
  xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功时执行的代码
      console.log('Response:', xhr.responseText);
    } else {
      // 请求失败时执行的代码
      console.error('Request failed. Returned status of ' + xhr.status);
    }
  };

  // 发送JSON数据
  xhr.send(JSON.stringify(jsonData));

  // 因为是同步请求，这里可以返回响应文本
  return xhr.responseText;
}


const survey = new Model(json);
survey.onComplete.add((sender, options) => {
  
  // 调用函数，发送同步请求
  var url = '/save_full';
  var jsonData = sender.data;
  var response = sendSyncRequest(url, jsonData);
  var responseObj = JSON.parse(response)
  // console.log(responseObj.message)
  const surveyJson = {
    completedHtml: '<div style=" text-align: center; margin: 48px auto;"><h3>It is <span style="color:red; font-size: inherit;">'+ responseObj.message  +' </span>'
    + ' that you may experience an early death.</h3></div>' + '<img src="'+ responseObj.image_url +'" alt="Description" class="image">'
  };
  survey.setJsonObject(surveyJson);

  

});
</script>

<template>
  <SurveyComponent :model="survey"></SurveyComponent>
</template>
<style>

.sd-element__title .sv-string-viewer {
  white-space: pre-line !important;
}
</style>